<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-商品列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" href="../static/css/reset.css">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css">
</head>
<body>
<div class="header_con" th:include="inner::header"></div>
<div class="search_bar clearfix" th:include="inner::search"></div>
<div class="navbar_con" th:include="inner::nav"></div>

<div class="breadcrumb">
    <a href="#">全部分类</a>
    <span>></span>
    <a href="#">商品列表</a>
</div>

<div class="main_wrap clearfix">
    <div class="l_wrap fl clearfix">
        <div class="new_goods">
            <h3>新品推荐</h3>
            <ul>
                <li>
                    <a href="#"><img src="images/goods/goods001.jpg" th:src="@{/images/goods/goods001.jpg}"></a>
                    <h4><a href="#">进口柠檬</a></h4>
                    <div class="prize">￥3.90</div>
                </li>
                <li>
                    <a href="#"><img src="images/goods/goods002.jpg" th:src="@{/images/goods/goods002.jpg}"></a>
                    <h4><a href="#">玫瑰香葡萄</a></h4>
                    <div class="prize">￥16.80</div>
                </li>
            </ul>
        </div>
    </div>

    <div class="r_wrap fr clearfix">
        <div class="sort_bar">
            <a href="#" th:class="${product.orderBy == null || product.orderBy == '' ? 'active' : ''}" th:href="@{/list/(categoryId=${product.categoryId}, orderBy='')}" class="active">默认</a>
            <a href="#" th:class="${product.orderBy == 'price' ? 'active' : ''}" th:href="@{/list/(categoryId=${product.categoryId}, orderBy='price')}" title="price">价格</a>
            <a href="#" th:class="${product.orderBy == 'popularity' ? 'active' : ''}" th:href="@{/list/(categoryId=${product.categoryId}, orderBy='popularity')}" title="popularity">人气</a>
        </div>

        <ul class="goods_type_list clearfix">
            <th:block th:each="product,row : ${productPage.list}">
            <li>
                <a href="detail.html" th:href="@{/product/{id}(id=${product.id})}"><img src="images/goods/goods003.jpg" th:src="${product.imageUrl}"></a>
                <h4><a href="detail.html" th:text="${product.name}" style="font-weight: bolder">大兴大棚草莓</a></h4>
                <h4><a href="detail.html">
                    <span style="float: left">
                        库存: <span th:text="${product.stock}">1000</span>
                    </span>
                    <span style="float: right">
                        人气：<span th:text="${product.popularity}">1000</span>
                    </span>
                </a></h4>
                <div class="operate">
                    <span class="prize">￥<span th:text="${product.price}">16.80</span></span>
                    <span class="unit" th:text="${product.price + '/' + product.unit}">16.80/500g</span>
                    <a href="#" class="add_goods" title="加入购物车"></a>
                </div>
            </li>
            </th:block>
        </ul>

        <div class="pagenation">
            <a href="#" th:if="${productPage.isFirstPage}">«上页</a>
            <a href="#" th:href="@{/list/(pIndex=${productPage.prePage},  categoryId=${product.categoryId})}" th:if="${!productPage.isFirstPage}">«上页</a>
            <a href="#"
               th:each="i: ${productPage.navigatepageNums}"
               th:href="@{/list/(pIndex=${i},  categoryId=${product.categoryId})}"
               th:class="${productPage.pageNum == i ?'active':''}"
               th:text="${i}">1</a>
            <a href="#" th:href="@{/list/(pIndex=${productPage.nextPage}, categoryId=${product.categoryId})}" th:if="${!productPage.isLastPage}">下页»</a>
            <a href="#" th:if="${productPage.isLastPage}">下页»</a>
        </div>
    </div>
</div>

<div th:include="inner::footer" class="footer"></div>

<script type="text/javascript" th:src="@{/js/jquery.min.js}" src="../static/js/jquery.min.js"></script>
<script type="text/javascript">

    $(function() {
        $('.sort_bar a').click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            window.location.href = '/list?orderBy=' + $(this).attr('title');
        })
    })

</script>
</body>
</html>